<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据分布 - 港口无人化协同作业平台</title>
    <base href="/">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="data-analysis.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>

<body>
    <div class="container">
        <nav class="navbar">
            <div class="logo">港口无人化协同作业平台</div>
            <ul class="nav-links">
                <li><a href="/index.html">首页</a></li>
                <li><a href="/page2.html">作业管理</a></li>
                <li><a href="page3.html">设备监控</a></li>
                <li><a href="/page4.html" class="active">数据分布</a></li>
            </ul>
        </nav>

        <main class="main-content">
            <div class="distribution-charts">
                <div class="chart-box heatmap">
                    <h3>设备分布热力图</h3>
                    <div id="deviceHeatmap" class="chart"></div>
                </div>
                <div class="chart-box scatter">
                    <h3>作业效率散点图</h3>
                    <div id="efficiencyScatter" class="chart"></div>
                </div>
                <div class="chart-box 3d-map">
                    <h3>货物堆存三维视图</h3>
                    <div id="cargo3D" class="chart"></div>
                </div>
            </div>
        </main>
    </div>

    <script src="/data.js"></script>
    <script src="/data-distribution.js"></script>
</body>
</html>